<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page, index) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgUrl"  />
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    list: Array
  },
  data () {
    return{
      swiperOption: {
        // 循环滚动
        // loop: true,
        // 暂停自动播放
        autoplay: false
      }
    }
  },
  // 以下是计算属性，是根据其他的一些属性计算出一组新的结果，其自带缓存机制
  computed: {
    // 定义一个 pages 数据
    pages () {
      const pages = []
      this.list.forEach((item,index) => {
        // 定义一个 page ，表示当前的元素应当展示在轮播图的第几页，超过 8 就展示在第二页，以此类推
        const page = Math.floor(index / 8)
        // 如果页面不存在，则返回一个空数组，其作用是将 iconList 数组转换为 二维数组 
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style lang="less" scoped>
    @import "~@/assets/styles/mixins.less";
    @import "~@/assets/styles/varibles.less";
    .icons /deep/ .swiper-container {
      height: 0;
      padding-bottom: 50%;
    }
    .icons {
      margin-top: .1rem;
    }
      .icon {
        position: relative;
        overflow: hidden;
        float: left;
        width: 25%;
        height: 0;
        padding-bottom: 25%;
      }
        .icon-img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: .44rem;
          box-sizing: border-box;
          padding: .1rem;
        }
          .icon-img-content {
            display: block;
            margin: 0 auto;
            height: 100px;
          }
        .icon-desc {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: .44rem;
          line-height: .44rem;
          text-align: center;
          color: @textColor;
          .textoverflow();
        }
</style>
